/*
 * Events.fx
 *
 * Created on 24-dic-2009, 14:05:59
 */

package ProgramSamples;

import javafx.animation.Timeline;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;



def playNormal = Image { url: "{__DIR__}Images/play_onMouseExited.png"};
def playHover = Image { url: "{__DIR__}Images/play_onMouseEntered.png"};
def playPressed = Image { url: "{__DIR__}Images/play_onMousePressed.png"};
def stopNormal = Image { url: "{__DIR__}Images/stop_onMouseExited.png"};
def stopHover = Image { url: "{__DIR__}Images/stop_onMouseEntered.png"};
def stopPressed = Image { url: "{__DIR__}Images/stop_onMousePressed.png"};

var image = playNormal;

var button = ImageView {image: bind image}

var mode = true; //true for the Play mode,
                 //false for the Stop mode

var X: Number;
var Y: Number;

var tooltip = Text {
   content: bind if (mode){
       "Play Button"
   }else{
       "Stop Button"
   }
   translateX: bind button.translateX
   translateY: bind button.translateY + 80
   opacity: 0.2
   font: Font {
       size: 12
       name: "Tahoma"
   }
   fill: Color.BLACK
};
def appear = Timeline {
   keyFrames: [
   at(0s) {tooltip.opacity => 0.2},
   at(1.0s) {tooltip.opacity => 0.9}
   ]
}
def disappear = Timeline {
   keyFrames: [
   at(0s) {tooltip.opacity => 0.9},
   at(1.0s) {tooltip.opacity => 0.2}
   ]
}


Stage {
   title: "Play Button"
   scene: Scene {
       fill: Color.WHITE
       width: 300
       height: 240
       content: Group {
           content: [button,tooltip]
           onMouseEntered: function(event) {
               image = if (mode){
                   playNormal;
               } else {
                   stopNormal
               }
               //appear.rate = -1;
               println("entrando");
               tooltip.opacity=1.0;
            
           }
           onMouseExited: function(event) {
               image = if (mode){
                   playNormal;
               } else {
                   stopNormal
               }
               //appear.rate = -1;
               println("saliendo");
               tooltip.opacity=0.2;
               //disappear.play();

           }
           onMouseReleased: function(event) {
               if (mode){
                   image = stopHover;
                   mode = false;
               } else {
                   image = playHover;
                   mode = true;
               }
           }
           
           onMousePressed: function(event) {
               X = event.sceneX - event.node.translateX;
               println("event.sceneX: {event.sceneX}");
               println("event.node.translateX: {event.node.translateX}");
               println("resultado: {X}");
               Y = event.sceneY - event.node.translateY;
               
               if(mode){
                   image=playPressed;

               }else{
                   image=stopPressed;
               }
           }
           
           onMouseDragged: function(event) {
               if (event.sceneX - X <0) {
                   event.node.translateX = 0;
               } else {
                    if (event.sceneX - X > 300 - image.width){
                        event.node.translateX = 300 - image.width;
                    } else {
                        event.node.translateX = event.sceneX - X;
                    }
               }
               if (event.sceneY - Y <0) {
                   event.node.translateY = 0;
               } else {
                    if (event.sceneY - Y > 240 - image.height){
                        event.node.translateY = 240 - image.height;
                    } else{
                        event.node.translateY = event.sceneY - Y;
                    }
               }
           }
       }
    }

}	
/*var image = playNormal;

var mode = true;

var button = ImageView {image: bind image}

var X: Number;
var Y: Number;


var tooltip = Text {
   content: bind if (mode) "Play Button" else "Stop Button"
   translateX: bind button.translateX
   translateY: bind button.translateY + 80
   opacity: 0.0
   font: Font {
       size: 12
       name: "Tahoma"
   }
   fill: Color.BLACK
 };

def appear = Timeline {
   keyFrames: [
   at(0s) {tooltip.opacity => 0.0},
   at(0.5s) {tooltip.opacity => 1.0}
   ]
}
Stage {
   title: "Play Button"
   scene: Scene {
       fill: Color.WHITE
       width: 300
       height: 240
       content: Group {
           content: [
           button,
           tooltip
           ]
           onMouseEntered: function(event) {
               image = if (mode){
                   playHover;
               } else {
                   stopHover
               }
               appear.rate = 1;
               appear.play();
           }
           onMouseExited: function(event) {
               image = if (mode){
                   playNormal;
               } else {
                   stopNormal
               }
               appear.rate = -1;
               appear.play();
           }
           onMousePressed: function(event) {
               X = event.sceneX - event.node.translateX;
               Y = event.sceneY - event.node.translateY;
               image = if (mode){
                   playPressed;
               } else {
                   stopPressed;
               }
           }
           onMouseReleased: function(event) {
               if (mode){
                   image = stopHover;
                   mode = false;
               } else {
                   image = playHover;
                   mode = true;
               }
           }
           onMouseDragged: function(event) {
               if (event.sceneX - X <0) {
                   event.node.translateX = 0;
               } else { if (event.sceneX - X > 300 - image.width){
                   event.node.translateX = 300 - image.width;
               } else {
                   event.node.translateX = event.sceneX - X;
               }
               }
               if (event.sceneY - Y <0) {
                   event.node.translateY = 0;
               } else {if (event.sceneY - Y > 240 - image.height){
                   event.node.translateY = 240 - image.height;
               } else{
                   event.node.translateY = event.sceneY - Y;
               }
               }
           }
       }
   }
}*/